<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chinamap_graticule</title>
    <script type="text/javascript" src="../lib/d3.js"></script>
    <script type="text/javascript" src="../lib/topojson.js"></script>
</head>
<body>
<script type="text/javascript">
    var width = 1000, height = 1000;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(0,0)");

    //我用的firefox估计版本过低所以根本就不支持transform

    var eps = 1e-4;   //防止网格没有边界线，不过因为我们是对中国区域画网格，并不影响


    //创建一个经纬度网格生成器，设置经度和纬度范围以及步长
    var graticule = d3.geo.graticule()
        .extent([[71,16],[137+eps,54]])
        .step([3,3]);

    //生成网格数据
    var grid  = graticule();


    var projection = d3.geo.mercator()
        .center([107,31])
        .scale(800)
        .translate([width/2,height/2]);
    var path = d3.geo.path().projection(projection);



    d3.json("../geojson/china.topojson",function(error,toporoot){
        if(error)
            return console.error(error);

        var georoot = topojson.feature(toporoot,toporoot.objects.china);


        svg.append("path")
            .datum(grid)
            .attr("class","graticule")
            .style("stroke","steelblue")
            .style("stroke-width","2")
            .attr("d",path);

        svg.selectAll("path.province")
            .data(georoot.features)
            .enter()
            .append("path")
            .attr("class","province")
            .attr("fill", "#ccc")
            .style("stroke","steelblue")
            .attr("d", path );

    });

</script>
</body>
</html>